<template>
  <div class="wrap">
    <div class="stepset">
      <div class="color333 font18"> 发短信 </div>
    </div>
    <el-form :model="smsForm" size="mini" ref="smsForm">
      <el-form-item   class="mt30 flex">
        <span class="font16 color333">短信模板：</span>
        <span class="font16 color333">{{this.smsForm.templateName}}</span>
      </el-form-item>
      <el-form-item class="w178 mt30 txt">
        <span class="font16 color333">短信内容：</span>
        <span class="font16 color333 lh24" v-html="this.smsForm.previewContent"></span>
      </el-form-item>
    </el-form>

    <div class="save t_c mt30">
      <el-button type="primary" @click="handleClose">确认</el-button>
    </div>

  </div>
</template>

<script>
// 自动化营销-----发短信组件
export default {
  name: "messageInfo",
  components: {},
  data() {
    return {
      //表单规则
      smsForm: {
        tempId:"",
        params:{

        },
        previewContent:"",
        templateName:"",
        testReceiver:""
      },
    };
  },
  props: {
    id:Number,
    nodeInfo: {
      type: Object,
    },
    journeyId: {
      type: String,
      default: '',
    }
  },
  methods: {
    
    //子关闭 短信模板弹框
    handleClose:function() {
      this.$emit("handleClose", false);
    },
    queryInfo(){
      let that = this;
      this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, res=>{
        if(res.code == '0000'){
          if(res.data.nodeVariable != null || res.data.nodeVariable != ''){
              //回显数据
              let data = JSON.parse(res.data.nodeVariable);
              that.smsForm = data;
              this.smsForm.previewContent = this.smsForm.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>')
          }
        }
      })
    },
  },

  mounted() {
    this.queryInfo();
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .el-form-item {
    margin-top: 30px;
  }
  .btns {
    .el-button {
      margin: 0 30px 0 0;
    }
  }
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  .textareaParm{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
}
</style>

